生命週期是什麼

每一個元件都有自己的生命週期（Lifecycle），
當元件被建立、掛載到畫面、資料變化、最後被移除時，Vue 都會在這些階段呼叫特定的 hooks，而我們就能在這些 hook 裡撰寫程式。

生命週期過程與相對應的 hooks

Vue 元件的生命週期可以分成四個階段：建立 → 掛載 → 更新 → 銷毀，以下是各階段所對應的 composition API 的 hooks

1. 建立階段
   • onBeforeMount：元件還沒被掛載到畫面上
2. 掛載階段
   • onMounted ：元件已經被插入到 DOM，可以存取畫面元素
3. 更新階段
   • onBeforeUpdate：資料改變，但畫面尚未更新
   • onUpdated ：資料變更後畫面更新完成
4. 銷毀階段
   • onBeforeUnmount：元件準備被移除
   • onUnmounted：元件與監聽、完全清除

基本範例

<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'

const count = ref(0)

onMounted(() => {
  console.log('✅ 元件掛載完成')
})

onUpdated(() => {
  console.log('♻️ 畫面更新完成，目前 count =', count.value)
})

onUnmounted(() => {
  console.log('🧹 元件已銷毀，清除資源')
})
</script>

<template>
  <div class="life-demo">
    <p>目前數字：{{ count }}</p>
    <button @click="count++">點我加一</button>
  </div>
</template>

1. 畫面載入 → onMounted() 執行
2. 點擊按鈕改變 count → onUpdated() 觸發
3. 離開此元件 → onUnmounted() 清理

看完了範例突然浮現了一個疑問，難道所有元件都需要生命週期嗎？看來不是的，靜態物件的話就不需要用到生命週期，只有在有動態行為時才需要使用到。

小結

• 生命週期概念
• 生命週期範例與小小疑惑